<template>
  <div class="sop-library">
    <el-card>
      <div class="header-row">
        <el-input
          v-model="searchText"
          placeholder="输入关键词搜索（名称/设备/步骤/要点）"
          clearable
          style="width:260px;margin-right:18px;"
        />
        <el-button type="primary" @click="handleAdd">新增作业方法</el-button>
      </div>
      <el-table :data="filteredList" border style="width:100%;" :fit="true">
        <el-table-column prop="name" label="作业名称"  width="150px"/>
        <el-table-column prop="device" label="适用设备/场景" width="180px"/>
        <el-table-column prop="steps" label="操作步骤" width="220px" />
        <el-table-column prop="safety" label="安全要点" width="200px" />
        <el-table-column prop="remark" label="注意事项" width="200px" />
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button size="small" text type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" text type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="作业方法详情" width="600px" destroy-on-close>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="作业名称">{{ detailRow.name }}</el-descriptions-item>
        <el-descriptions-item label="适用设备/场景">{{ detailRow.device }}</el-descriptions-item>
        <el-descriptions-item label="操作步骤">{{ detailRow.steps }}</el-descriptions-item>
        <el-descriptions-item label="安全要点">{{ detailRow.safety }}</el-descriptions-item>
        <el-descriptions-item label="注意事项">{{ detailRow.remark }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="editVisible" :title="editTitle" width="600px" destroy-on-close>
      <el-form :model="editRow" :rules="formRules" ref="formRef" label-width="110px">
        <el-form-item label="作业名称" prop="name">
          <el-input v-model="editRow.name"/>
        </el-form-item>
        <el-form-item label="适用设备/场景" prop="device">
          <el-input v-model="editRow.device"/>
        </el-form-item>
        <el-form-item label="操作步骤" prop="steps">
          <el-input v-model="editRow.steps" type="textarea"/>
        </el-form-item>
        <el-form-item label="安全要点" prop="safety">
          <el-input v-model="editRow.safety" type="textarea"/>
        </el-form-item>
        <el-form-item label="注意事项" prop="remark">
          <el-input v-model="editRow.remark" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editVisible=false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
    <!-- 删除确认弹窗 -->
    <el-dialog v-model="deleteVisible" title="提示" width="320px" center>
      <div>确定要删除该作业方法吗？</div>
      <template #footer>
        <el-button @click="deleteVisible=false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

interface SOPItem {
  id: number
  name: string
  device: string
  steps: string
  safety: string
  remark: string
}

let idSeed = 1
const sopList = ref<SOPItem[]>([
  {
    id: idSeed++,
    name: '高空灯具更换',
    device: '厂房照明系统',
    steps: '1. 断电；2. 佩戴安全带；3. 使用升降平台；4. 更换灯具；5. 恢复供电。',
    safety: '高空作业必须佩戴安全带，严禁单人作业。',
    remark: '风大或雨天禁止高空作业。'
  },
  {
    id: idSeed++,
    name: '电梯困人救援',
    device: '乘客电梯',
    steps: '1. 及时通知维保；2. 关闭电源并安抚乘客；3. 专业人员排障开门。',
    safety: '禁止非专业人员强行开门。',
    remark: '优先保证人员安全。'
  },
  {
    id: idSeed++,
    name: '配电柜清扫保养',
    device: '配电房/配电柜',
    steps: '1. 断开主电源；2. 检查无电；3. 清理积尘；4. 检查连接紧固；5. 恢复供电。',
    safety: '作业全程佩戴绝缘手套，确认停电再作业。',
    remark: '提前贴好检修标识。'
  },
  {
    id: idSeed++,
    name: '空调主机换季维护',
    device: '中央空调',
    steps: '1. 关闭系统；2. 排空冷媒；3. 清洗冷凝器、风机盘管；4. 检查电气部件。',
    safety: '设备彻底断电，防止意外启动。',
    remark: '作业完毕后恢复系统设置。'
  }
])

const searchText = ref('')
const filteredList = computed(() =>
  searchText.value
    ? sopList.value.filter(row =>
        row.name.includes(searchText.value) ||
        row.device.includes(searchText.value) ||
        row.steps.includes(searchText.value) ||
        row.safety.includes(searchText.value)
      )
    : sopList.value
)

// 详情弹窗
const dialogVisible = ref(false)
const detailRow = ref<SOPItem>({
  id: 0,
  name: '',
  device: '',
  steps: '',
  safety: '',
  remark: ''
})
function showDetail(row: SOPItem) {
  detailRow.value = { ...row }
  dialogVisible.value = true
}

// 新增/编辑弹窗
const editVisible = ref(false)
const editTitle = ref('新增作业方法')
const editRow = reactive<SOPItem>({
  id: 0,
  name: '',
  device: '',
  steps: '',
  safety: '',
  remark: ''
})
const formRef = ref()
const formRules = {
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  device: [{ required: true, message: '必填', trigger: 'blur' }],
  steps: [{ required: true, message: '必填', trigger: 'blur' }],
  safety: [{ required: true, message: '必填', trigger: 'blur' }]
}
function handleAdd() {
  editTitle.value = '新增作业方法'
  Object.assign(editRow, { id: 0, name: '', device: '', steps: '', safety: '', remark: '' })
  editVisible.value = true
}
function handleEdit(row: SOPItem) {
  editTitle.value = '编辑作业方法'
  Object.assign(editRow, row)
  editVisible.value = true
}
function submitEdit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return
    if (editTitle.value.startsWith('编辑')) {
      const idx = sopList.value.findIndex(t => t.id === editRow.id)
      if (idx !== -1) sopList.value[idx] = { ...editRow }
      ElMessage.success('编辑成功')
    } else {
      sopList.value.unshift({ ...editRow, id: idSeed++ })
      ElMessage.success('新增成功')
    }
    editVisible.value = false
  })
}

// 删除弹窗
const deleteVisible = ref(false)
const deleteTarget = ref<SOPItem | null>(null)
function handleDelete(row: SOPItem) {
  deleteTarget.value = row
  deleteVisible.value = true
}
function confirmDelete() {
  if (deleteTarget.value) {
    sopList.value = sopList.value.filter(t => t.id !== deleteTarget.value!.id)
    ElMessage.success('删除成功')
  }
  deleteVisible.value = false
}
</script>

<style scoped>
.sop-library {
  width: 100vw;
  min-height: 100vh;
  padding: 36px 0 0 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: auto;
}
.header-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

/* 自动换行，不溢出横向 */
::v-deep .el-table .cell {
  white-space: normal !important;
  word-break: break-all;
  line-height: 1.8;
  font-size: 15px;
}
</style>
